<template>
  <div class="table-base">
    <div class="bread-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="iconfont icon-shuju"></i>基本信息表</el-breadcrumb-item>
        <el-breadcrumb-item>
          {{this.$route.query.action}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="margin:0 auto"
        v-if="type==='portrait'"
      >
        <el-table-column
          prop="actor_name"
          label="姓名"
          width="100"
          v-if="tableData[0].actor_name"
        >
        </el-table-column>
        <el-table-column
          prop="actor_id"
          label="学号"
          v-if="tableData[0].actor_id"
        >
        </el-table-column>
        <el-table-column
          prop="context_major_name"
          label="专业"
          v-if="tableData[0].context_major_name"
        >
        </el-table-column>
        <el-table-column
          prop="context_course_name"
          label="课程大类"
          width="120"
          v-if="tableData[0].context_course_name"
        >
        </el-table-column>
        <el-table-column
          prop="context_course_teacherName"
          label="教师"
          width="100"
          v-if="tableData[0].context_course_teacherName"
        >
        </el-table-column>
        <el-table-column
          prop="object_name"
          label="课程"
          v-if="tableData[0].object_name"
        >
        </el-table-column>
        <el-table-column
          prop="object_fileType"
          label="文件格式"
          v-if="tableData[0].object_fileType"
        >
        </el-table-column>
        <el-table-column
          prop="result_loginTime"
          label="登陆时间"
          v-if="tableData[0].result_loginTime"
        >

          <template slot-scope="scope">
            {{scope.row.result_loginTime | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column
          prop="result_logoutTime"
          label="登出时间"
          v-if="tableData[0].result_logoutTime"
        >
          <template slot-scope="scope">
            {{scope.row.result_logoutTime | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column
          prop="object_title"
          label="标题"
          v-if="tableData[0].object_title"
        >
        </el-table-column>
        <el-table-column
          prop="object_title"
          label="内容"
          v-if="tableData[0].result_content"
        >
          <template slot-scope="scope">
            <span v-html="longFormat(scope.row.result_content)"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="result_score"
          label="分数"
          v-if="tableData[0].result_score"
        >
        </el-table-column>
        <el-table-column
          prop="result_period"
          label="学习时长"
          v-if="tableData[0].result_period"
        >
        </el-table-column>
        <el-table-column
          prop="result_completeness"
          label="是否完成"
          v-if="tableData[0].result_completeness"
        >
        </el-table-column>
        <el-table-column
          prop="result_startTime"
          label="开始时间"
          v-if="tableData[0].result_startTime"
        >
          <template slot-scope="scope">
            {{scope.row.result_startTime | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column
          prop="result_useTime"
          label="耗时"
          v-if="tableData[0].result_useTime"
        >
        </el-table-column>
        <el-table-column
          prop="record_module"
          label="模块"
          v-if="tableData[0].record_module"
        >
        </el-table-column>

        <el-table-column
          prop="record_url"
          label="访问地址"
          v-if="tableData[0].record_url"
        >
        </el-table-column>
        <el-table-column
          prop="record_time"
          label="访问时间"
          v-if="tableData[0].record_time"
        >
        </el-table-column>
        <el-table-column
          prop="period_time"
          label="持续时间"
          v-if="tableData[0].period_time"
        >
        </el-table-column>
        <el-table-column
          prop="record_start"
          label="开始时间"
          v-if="tableData[0].record_start"
        >
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始时间"
          v-if="tableData[0].start_time"
        >
        </el-table-column>
        <el-table-column
          prop="record_end"
          label="结束时间"
          v-if="tableData[0].record_end"
        >
        </el-table-column>
        <el-table-column
          prop="score_one"
          label="成绩一"
          v-if="tableData[0].score_one"
        >
        </el-table-column>
        <el-table-column
          prop="score_two"
          label="成绩二"
          v-if="tableData[0].score_two"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄段"
          v-if="tableData[0].age"
        >
        </el-table-column>
        <el-table-column
          prop="cnt"
          label="访问次数段"
          v-if="tableData[0].cnt"
        >
        </el-table-column>
        <el-table-column
          prop="long"
          label="持续时间段"
          v-if="tableData[0].long"
        >
        </el-table-column>
        <el-table-column
          prop="mean"
          label="成绩段"
          v-if="tableData[0].mean"
        >
        </el-table-column>
        <el-table-column
          prop="neigh"
          label="KNN"
          v-if="tableData[0].neigh"
        >
        </el-table-column>
        <el-table-column
          prop="rf"
          label="RF"
          v-if="tableData[0].rf"
        >
        </el-table-column>
        <el-table-column
          prop="svm"
          label="SVM"
          v-if="tableData[0].svm"
        >
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="text-align:center;margin-top:20px;"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        type: 'portrait',
        page: 1,
        page_size: 10,
        currentPage: 1,
        total: 0,
        tableData: [{
          context_major_name: null,
          result_loginTime: null
        }]
      }
    },
    filters: {
      dateFormat(val) {
        let data = new Date(parseInt(val.slice(6, 19))).toLocaleString()
        return data
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      longFormat(val) {
        if (val.length > 50) {
          let data = val.slice(0, 40)
          return data + '...'
        } else {
          return val
        }

      },
      handleSizeChange(val) {
        this.page_size = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
      getData() {
        this.loading = true
        let url = `/${this.$route.query.type}/${this.$route.query.action}/`
        this.$http.get(url, {
          params: {
            page: this.page,
            page_size: this.page_size
          }
        }).then(response => {
          this.tableData = response.data.results
          this.total = response.data.count
          this.loading = false
        })
      }
    }
  }

</script>

<style
  lang="scss"
  scoped
>
  .table-base {
    height: 100%;

    .table-wrap {
      padding: 20px;
      height: calc(100% - 40px);
      overflow-y: scroll;
    }
  }

</style>
